<template>
  <div class="calendar-warp">
    <div class="calendar-panel">
      <div class="calendar-header">
        <span class="iconfont icon-right" @click="nextMonth" />
        <span class="iconfont icon-left" @click="prevMonth" />
        <div class="calendar-header-text">{{ year }}年{{ month }}月</div>
      </div>
      <div class="calendar-container">
        <table class="calendar-table">
          <thead>
            <tr>
              <td v-for="(item,i) in days" :key="i">{{ item }}</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(week,i) in dateViews" :key="i">
              <template v-for="(day,j) in week">
                <td :key="j" :class="month===day.month?'cur-month':'not-month'">
                  <div
                    class="calendar-date-item"
                    :class="{
                      'today':isToday(day),
                      'selected':isSelected(day)}"
                    @click="selectDay(day)"
                  >
                    <span class="solar-text">
                      {{ day.date }}
                      <template v-if="day.tag">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1em" height="1em" :class="'icon-tag '+day.tag.className ">
                          <text x="0" y="1em" alignment-baseline="baseline">{{ day.tag.label }}</text>
                        </svg>
                      </template>
                    </span>
                    <div class="lunar-text" :class="{'is-festival':day.festivals.length>0}">
                      <template v-if="day.festivals.length>0">
                        {{ day.festivals[0].name }}
                      </template>
                      <template v-else>
                        {{ day.lunar.lDay===1?day.lunar.IMonthCn:day.lunar.IDayCn }}
                      </template>
                    </div>
                  </div>
                </td>
              </template>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="calendar-panel calendar-panel-right">
      <div class="calendar-info-row">
        <span>{{ curDate.lunar.cYear }}年{{ curDate.lunar.cMonth }}月{{ curDate.lunar.cDay }}</span>
        <span>{{ curDate.lunar.ncWeek }}</span>
      </div>
      <div class="calendar-info-row">
        <span class="calendar-info-day" :class="{'calendar-festival-day':curDate.festivals.length>0}">{{ curDate.lunar.cDay }}</span>
      </div>
      <div class="calendar-info-row">
        <span>{{ curDate.lunar.IMonthCn }}</span>
        <span>{{ curDate.lunar.IDayCn }}</span>
      </div>
      <div class="calendar-info-row">
        <span>{{ curDate.lunar.gzYear }}年</span>
        <span>【{{ curDate.lunar.Animal }}年】</span>
      </div>
      <div class="calendar-info-row">
        <span>{{ curDate.lunar.gzMonth }}月</span>
        <span>{{ curDate.lunar.gzDay }}日</span>
      </div>
      <div class="calendar-info-row">
        <span>{{ curDate.lunar.astro }}</span>
      </div>
      <div v-if="curDate.festivals.length>0" class="calendar-info-row">
        <span v-for="item in curDate.festivals" :key="item.name" class="calendar-festival-text">{{ item.name }}</span>
      </div>
      <SpaceWatch style="margin: 0 auto" />
      <div v-if="!isNow" class="today-btn" @click="checkToday">
        <span class="today-text">今</span>
      </div>
    </div>
  </div>
</template>
<script>
import calendar from './calendar'
import SpaceWatch from './SpaceWatch'
export default {
  name: 'Calendar',
  components: { SpaceWatch },
  data() {
    return {
      year: 2020,
      month: 7,
      days: ['日', '一', '二', '三', '四', '五', '六'],
      dateViews: [],
      selectDate: {
        year: 2020,
        month: 7,
        date: 18
      },
      festival: {
        lunar: {
          '1-1': '春节',
          '1-15': '元宵节',
          '2-2': '龙头节',
          '5-5': '端午节',
          '7-7': '七夕节',
          '7-15': '中元节',
          '8-15': '中秋节',
          '9-9': '重阳节',
          '10-1': '寒衣节',
          '10-15': '下元节',
          '12-8': '腊八节',
          '12-23': '祭灶节'
        },
        solar: {
          '1-1': '元旦',
          '2-14': '情人节',
          '3-8': '妇女节',
          '3-12': '植树节',
          '4-4': '清明节',
          '5-1': '劳动节',
          '5-4': '青年节',
          '6-1': '儿童节',
          '7-1': '建党节',
          '8-1': '建军节',
          '9-10': '教师节',
          '10-1': '国庆节',
          '12-24': '平安夜',
          '12-25': '圣诞节'
        }
      },
      dateMarks: [
        // 2020元旦
        { date: ['2020-1-1'], type: 'rest', label: '休', className: 'rest-tag' },
        // 2020春节
        { date: '[2020-1-19]', type: 'work', label: '班', className: 'work-tag' },
        { date: ['2020-1-24', '2020-1-30'], type: 'rest', label: '休', className: 'rest-tag' },
        { date: '[2020-2-1]', type: 'work', label: '班', className: 'work-tag' },
        // 2020清明节
        { date: ['2020-4-4', '2020-4-6'], type: 'rest', label: '休', className: 'rest-tag' },
        { date: ['2020-4-26'], type: 'work', label: '班', className: 'work-tag' },
        // 2020劳动节
        { date: ['2020-5-1', '2020-5-5'], type: 'rest', label: '休', className: 'rest-tag' },
        { date: ['2020-5-9'], type: 'work', label: '班', className: 'work-tag' },
        // 2020端午节
        { date: ['2020-6-25', '2020-6-27'], type: 'rest', label: '休', className: 'rest-tag' },
        { date: ['2020-6-28'], type: 'work', label: '班', className: 'work-tag' },
        // 2020国庆节和中秋节
        { date: ['2020-09-27'], type: 'work', label: '班', className: 'work-tag' },
        { date: ['2020-10-01', '2020-10-08'], type: 'rest', label: '休', className: 'rest-tag' },
        { date: ['2020-10-10'], type: 'work', label: '班', className: 'work-tag' },
        // 2021年元旦
        { date: ['2021-1-1', '2021-1-3'], type: 'rest', label: '休', className: 'rest-tag' },
        //  2021年春节
        { date: ['2021-2-7'], type: 'work', label: '班', className: 'work-tag' },
        { date: ['2021-2-11', '2021-2-17'], type: 'rest', label: '休', className: 'rest-tag' },
        { date: ['2021-2-20'], type: 'work', label: '班', className: 'work-tag' },
        //  2021年清明节
        { date: ['2021-4-3', '2021-4-5'], type: 'rest', label: '休', className: 'rest-tag' },
        //  2021年劳动节
        { date: ['2021-4-25'], type: 'work', label: '班', className: 'work-tag' },
        { date: ['2021-5-1', '2021-5-5'], type: 'rest', label: '休', className: 'rest-tag' },
        { date: ['2021-5-8'], type: 'work', label: '班', className: 'work-tag' },
        //  2021年端午节
        { date: ['2021-6-12', '2021-6-14'], type: 'rest', label: '休', className: 'rest-tag' },
        //  2021年中秋节
        { date: ['2021-9-18'], type: 'work', label: '班', className: 'work-tag' },
        { date: ['2021-9-19', '2021-9-21'], type: 'rest', label: '休', className: 'rest-tag' },
        //  2021年国庆节
        { date: ['2021-9-26'], type: 'work', label: '班', className: 'work-tag' },
        { date: ['2021-10-1', '2021-10-7'], type: 'rest', label: '休', className: 'rest-tag' },
        { date: ['2021-10-9'], type: 'work', label: '班', className: 'work-tag' }
      ]
    }
  },
  computed: {
    curDate() {
      const date = {
        year: this.selectDate.year,
        month: this.selectDate.month,
        date: this.selectDate.date
      }
      const lunar = calendar.solar2lunar(date.year, date.month, date.date)
      const festivals = this.getFestival(lunar)
      return { lunar, festivals }
    },
    isNow() {
      const now = new Date()
      const day = {
        year: now.getFullYear(),
        month: now.getMonth() + 1,
        date: now.getDate()
      }
      const c = this.selectDate.year + '-' + this.selectDate.month + '-' + this.selectDate.date
      const d = day.year + '-' + day.month + '-' + day.date
      const curV = this.year + '-' + this.month
      const checkV = this.selectDate.year + '-' + this.selectDate.month
      return c === d && curV === checkV
    }
  },
  created() {
    this.checkToday()
  },
  methods: {
    getMonthView(year, month) {
      const firstDate = new Date(year, month - 1, 1, 0, 0, 0, 0)
      const oneDay = 24 * 3600 * 1000
      const firstViewDate = new Date(firstDate - (firstDate.getDay() * oneDay))
      const viewsDate = []
      let week = []
      for (let i = 0; i < 42; i++) {
        const item = new Date(firstViewDate.getTime() + (i * oneDay))
        const day = item.getDay()
        const dateCell = {
          year: item.getFullYear(),
          month: item.getMonth() + 1,
          date: item.getDate(),
          day: item.getDay(),
          lunar: calendar.solar2lunar(item.getFullYear(), (item.getMonth() + 1), item.getDate())
        }
        dateCell.tag = this.getDateMark(dateCell.lunar)
        dateCell.festivals = this.getFestival(dateCell.lunar)
        week.push(dateCell)
        if (day === 6) {
          viewsDate.push(week)
          week = []
        }
      }
      return viewsDate
    },
    nextMonth() {
      const next = this.month + 1
      if (next > 12) {
        this.year += 1
        this.month = 1
      } else {
        this.month = next
      }
      this.dateViews = this.getMonthView(this.year, this.month)
    },
    prevMonth() {
      const prev = this.month - 1
      if (prev < 1) {
        this.year -= 1
        this.month = 12
      } else {
        this.month = prev
      }
      this.dateViews = this.getMonthView(this.year, this.month)
    },
    selectDay(day) {
      if (this.month !== day.month) {
        return
      }
      this.selectDate = {
        year: day.year,
        month: day.month,
        date: day.date
      }
    },
    isToday(day) {
      const now = new Date()
      const year = now.getFullYear()
      const month = now.getMonth() + 1
      const date = now.getDate()
      return (year === day.year) && (month === day.month) && (date === day.date)
    },
    isSelected(day) {
      const year = this.selectDate.year
      const month = this.selectDate.month
      const date = this.selectDate.date
      return (year === day.year) && (month === day.month) && (date === day.date)
    },
    getFestival(lunar) {
      const festival = {
        lunar: '',
        solar: ''
      }
      if (this.festival.lunar[lunar.lMonth + '-' + lunar.lDay]) {
        festival.lunar = this.festival.lunar[lunar.lMonth + '-' + lunar.lDay]
      }
      if (this.festival.solar[lunar.cMonth + '-' + lunar.cDay]) {
        festival.solar = this.festival.solar[lunar.cMonth + '-' + lunar.cDay]
      }
      const list = []
      if (festival.lunar) {
        list.push({ name: festival.lunar, type: 'lunar' })
      }
      if (festival.solar) {
        list.push({ name: festival.solar, type: 'solar' })
      }
      return list
    },
    checkToday() {
      const now = new Date()
      const day = {
        year: now.getFullYear(),
        month: now.getMonth() + 1,
        date: now.getDate()
      }
      this.selectDate = day
      this.year = day.year
      this.month = day.month
      this.dateViews = this.getMonthView(day.year, day.month)
    },
    getDateMark(lunar) {
      const dateTime = new Date(lunar.cYear, (lunar.cMonth - 1), lunar.cDay, 0, 0, 0, 0).getTime()
      let dateMark = {}
      function transformDate(str) {
        const arr = str.split('-')
        return new Date(Number(arr[0]), (Number(arr[1]) - 1), Number(arr[2]), 0, 0, 0, 0)
      }
      this.dateMarks.forEach((item) => {
        const arr = item.date
        if (arr.length === 1) {
          const itemTime = transformDate(arr[0]).getTime()
          if (itemTime === dateTime) {
            dateMark = item
          }
        }
        if (arr.length === 2) {
          const minTime = transformDate(arr[0]).getTime()
          const maxTime = transformDate(arr[1]).getTime()
          if (dateTime >= minTime && dateTime <= maxTime) {
            dateMark = item
          }
        }
      })
      return dateMark
    }
  }
}
</script>

<style scoped>
  .calendar-warp{
    display: inline-block;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 4px;
  }
  .calendar-panel{
    display: block;
    float: left;
  }
  .calendar-panel-right{
    width: 160px;
    height: 364px;
    position: relative;
  }
  .calendar-header{
    font-size: 14px;
    color: #333333;
  }
  .calendar-header span.icon-left{
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    float: left;
    font-size: 14px;
    cursor: pointer;
    margin-left: 15px;
  }
  .calendar-header span.icon-right{
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    float: right;
    font-size: 14px;
    cursor: pointer;
    margin-right: 15px;
  }
  .calendar-header span.iconfont:hover{
    background-color: #f2f2f2;
    border-radius: 15px;
  }
  .calendar-header-text{
    margin-left:30px ;
    margin-right: 30px;
    text-align: center;
    line-height: 30px;
  }
  .calendar-table{
    width: 100%;
    border-collapse: collapse;
  }
  .calendar-table thead td{
    text-align: center;
    font-size: 14px;
    color: #333333;
  }
  .calendar-table tbody td{
    text-align: center;
    font-size: 16px;
    padding: 2px;
    box-sizing: content-box;
  }
  .calendar-date-item{
    width: 50px;
    height: 50px;
    padding: 5px 0;
    border-radius: 25px;
    box-sizing: border-box;
  }
  .solar-text{
    position: relative;
    display: inline-block;
    line-height: 1;
  }
  .lunar-text{
    line-height: 1;
    font-size: 12px;
    text-align: center;
  }
  .icon-tag{
    position: absolute;
    width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    vertical-align: middle;
    font-size: 10px;
    top: 0;
    left: 100%;
    margin-left: 1px;
  }
  .icon-tag text{
    fill: #606266;
  }
  .cur-month .rest-tag text{
    fill: #26c000;
  }
  .cur-month .work-tag text{
    fill: #c07412;
  }
  .cur-month .is-festival{
    color: #f44f36;
  }
  .calendar-festival-text{
    color: #f44f36;
  }
  .cur-month .today .icon-tag text,
  .cur-month .selected .icon-tag text{
    fill: #f2f2f2;
  }
  .cur-month .today .solar-text,
  .cur-month .today .lunar-text,
  .cur-month .selected .lunar-text{
    color: #f2f2f2;
  }
  .not-month .icon-tag text{
    fill: #93969c;
  }
  td.cur-month{
    color: #606266;
  }
  td.not-month{
    color: #93969c;
  }
  .cur-month .calendar-date-item:hover{
    cursor: pointer;
    background-color: #f2f2f2;
  }
  .not-month .calendar-date-item.today{
    background-color: #f2f2f2;
  }
  .not-month .calendar-date-item.selected{
    background-color: #f2f2f2;
  }
  .cur-month .calendar-date-item.today{
    background-color: #1c8de0;
    color: #ffffff;
  }
  .cur-month .calendar-date-item.selected{
    background-color: #ff8456;
    color: #ffffff;
  }
  .calendar-info-row{
    font-size: 14px;
    color: #606266;
    text-align: center;
  }
  .calendar-info-row span{
    margin: 0 5px;
  }
  .calendar-info-row .calendar-info-day{
    display: inline-block;
    width: 75px;
    height: 75px;
    margin: 15px auto;
    line-height: 76px;
    font-size: 52px;
    background: #fb0;
    border-radius: 3px;
    box-shadow: 1px 2px 5px rgba(0,0,0,.1), -1px 2px 5px rgba(0,0,0,.1);
    color: #FFFFFF;
    text-align: center;
  }
  .calendar-info-row .calendar-festival-day{
    background: #f44f36;
  }
  .today-btn{
    width: 50px;
    height: 50px;
    position: absolute;
    line-height: 50px;
    text-align: center;
    left: 50%;
    margin-left: -25px;
    bottom: 0;
    background-color: #1c8de0;
    border-radius: 25px;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
  }
</style>
